첫째:자바스크립트는 사용자와 상호작용하는 언어다.

둘째:웹브라우저는 한번 화면에 출력되면 가기 자신을 바꿀수 없다

셋째:자바스크립트는 HTML위에서 동작하는 언어다.

    var name = 'sung'
  alert("variable, "+name+",mutable, changeable, "+name+", unsettled, fickle, "+name+",mobile")
              

야간모드 중복 제거 Refactoring

Night_Day function Refactoring

                
        <script>
        function nightDayHandler(self) { nightDayHandler라는 펑션에 매개변수 추가:self
    
            var target = document.querySelector('body')  --target변수 = 'body'
            if(self.value === 'Night'){ -- 매개변수self 가 Night랑 같을때
            target.style.backgroundColor='black'; --target변수(body) 백그래운드컬러를 블랙으로 변경
            target.style.color='white'; --target변수(body) 컬러를 화이트로 변경
            self.value = 'Day';   --매개변수self 에 'Day'를 쓴다
    
            var alist = document.querySelectorAll('a'); --alist 변수 = 'a'
            var i = 0;    --변수 i에 0을 쓴다
            while(i < alist.length){ .length를 이용해 alist문자열의 길이를 확인하여 i보다 크면 참이다
            alist[i].style.color = 'powderblue'; alist변수에 i의 인덱스 값에 해당하는 데이터 컬러변경 
            i = i+1; i라는 변수에 1을 플러스한다
        }
          } else {    -- 거짓일때 --
            target.style.backgroundColor='white'; --target변수(body) 백그래운드컬러를 화이트으로 변경
            target.style.color='black';   --target변수(body) 컬러를 블랙으로 변경
            self.value = 'Night';   --매개변수self 에 'Night'를 쓴다
    
            var alist = document.querySelectorAll('a');
            var i = 0;
            while(i < alist.length){
            alist[i].style.color = 'blue';
            i = i+1;
            }
        }
    }
    </script>
          
              

Function을 활용하여 중복제거

                <script>
                -- linksetcolor라는 펑션 및 color라는 매개변수를 만들고 중복된 부분을 포함 시킨다 --
                  function linksetcolor(color){   
                    var alist = document.querySelectorAll('a');
                      var i = 0;
                      while(i < alist.length){
                      alist[i].style.color = 'color';   --
                      i = i+1;
                    }
                  }
              
              -- 중복 되거나 시간이 지나면 구분하기 어려운 부분은 명칭을 부여하여 관리하는것이 좋다--
                  function badysetcolor(color){
                    document.querySelector('body').style.color=color;
                  }
                  function badysetbackgroundcolor(color){
                    document.querySelector('body').style.backgroundColor=color;
                  }
                  function nightDayHandler(self) {
              
                      var target = document.querySelector('body')
                      if(self.value === 'Night'){
                        badysetbackgroundcolor('black');
                        badysetcolor('white');
                        self.value = 'Day';
              
                      linksetcolor('powderblue')
                    } else {
                      badysetbackgroundcolor('white');
                      badysetcolor('black');
                      self.value = 'Night';
              
                      linksetcolor('blue')
                  }
              }
                  </script>